<template>
	<view ref="role">
		<view v-if="roleList != ''">
			<uni-card :is-shadow="false" v-for="(item,index) in roleList" :key="index">
				<p class="grid-integral">角色名称：{{ item.name }}</p>
				<p class="grid-integral">员工职位：
				    <span v-if="item.staffPost != null">{{ item.staffPost }}</span>
					<span v-else>--</span>
				</p>
				<p class="grid-integral">角色备注：
					<span v-if="item.remark != null">{{ item.remark }}</span>
					<span v-else>--</span>
				</p>
				<p class="grid-integral">创建时间：{{item.createTime}}</p>
				<p class="grid-integral">初始类型：
					<template v-for="(dictItem, index) in dicts.ec_is_system">
				      <template v-if="item.isSystem == dictItem.value">
						<uni-tag :text="dictItem.text" :type="dictItem.type" />
					  </template>
					</template>
				</p>
				<view slot="actions" class="card-actions" style="padding: 0 20rpx;">
				<view></view>	
				<view class="flex_between">
				<view class="card-actions-item" @click="handleUpdate(item)" v-if="item.isSystem == 0">
					<text class="card-actions-item-text warningColor">修改</text>
				</view>				   
									 
				<view class="card-actions-item" @click="handleDelete(item,index)" v-if="item.isSystem == 0">
				  <text class="card-actions-item-text errorColor">删除</text>
				</view>
				
				<view class="card-actions-item" @click="handleManage(item)" style="margin-right: 0;">
				  <text class="card-actions-item-text themeColor">管理</text>
				</view>
				</view>
				</view>
			</uni-card>
			<!-- 加载更多 -->
			<uni-load-more color="#00a660" :status="loadStatus" />
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		<!-- 修改企业角色 -->
		<uni-popup ref="ListPopup" background-color="#fff" type="dialog">
			<uni-popup-dialog :before-close="true" :type="msgType" cancelText="取消" confirmText="确定" :title="title" @confirm="dialogConfirm" @close="closed">
			<template v-slot="content">
				<uni-forms ref="form" :rules="rules" :modelValue="form" labelWidth="150rpx">
				<uni-forms-item label="角色名称" name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入角色名称" :clearable="false" />
			    </uni-forms-item>
				<uni-forms-item label="备注说明" name="remark">
				    <uni-easyinput type="textarea" v-model="form.remark" placeholder="请输入备注说明"></uni-easyinput>
				</uni-forms-item>
				</uni-forms>						
			</template>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {getDictsByNameForUni} from "@/utils/dicts";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	import {addCompanyRole,delCompanyRole,getCompanyRole,listCompanyRoleForPager,updateCompanyRole} from "@/api/ec/console/org/companyRole";
	export default {
		name: "companyRole",
		components: {luanqingEmpty},
		props: {
			// 查询参数
			findApi: {type: String,default: null},
		},
		data() {
			return {
				title:'',
				form: {},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入角色名称'
							},{
								minLength: 2, maxLength: 12,
								errorMessage: '长度在2-12个，不能有特殊字符',
								trigger: "change"
							}]
						},
				},
				msgType:'info',
				dicts: {
					ec_is_system: [],
				},
				total: 0, //总条数
				loadStatus: 'loading', //是否加载中 //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: null,
				},
				roleList: [], //人员信息
			}
		},
		created() {
			this.getList();
			this.getDicts();
			// 加载页面数据
			uni.$on('refreshData', () => {
				this.getList(true);
			})
		},
		methods: {
			/** 上拉刷新回调 */
			loadMore() {
				if (this.loadStatus != 'noMore' && this.total > this.roleList.length) {
					this.loadStatus = 'loading';
					// 延迟500毫秒显示loading效果
					setTimeout(() => {
						// 执行查询的方法
						this.getList(false);
					}, 500)
				} else {
					// 停止加载
					this.loadStatus = 'noMore'
				}
			},
			/** 修改 */
			handleUpdate(row){
				this.title = "修改企业角色"
				this.form = row
				this.$refs.ListPopup.open('center')
			},
			/** 确定修改合同类型 */
			dialogConfirm(){
			    this.$refs.form.validate().then((res) => {
			      if (this.form.id != null) {
			            updateCompanyRole(this.form).then(response => {
			              this.getList(true);
						  this.closed()
						  this.$modal.msgSuccess("修改成功");
			            });
			          } else {
			            addCompanyRole(this.form).then(response => {
			              this.getList(true);
						  this.closed()
						  this.$modal.msgSuccess("新增成功");
			            });
			          }
			      });	        
			},
			closed(){
				this.$refs.ListPopup.close()
			},
			/**加载数据字典*/
			getDicts() {
				this.dicts.ec_is_system = getDictsByNameForUni("ec_is_system");
			},
			/**
			 * 查询列表
			 * @param reload true 重新加载数据； false 加载更多
			 */
			getList(reload) {
				if (reload) {
					this.queryParams.pageNum = 1;
					this.loadStatus = 'more'
          this.$modal.loading();
				}
				if (this.findApi != null) {
					this.queryParams.name = this.findApi
					this.roleList = []
				}
				listCompanyRoleForPager(this.queryParams).then(response => {
					if (reload) {
						uni.hideLoading()
					}
					this.total = response.total;
					if (response.total > 0) {
						const dataRows = response.rows;
						this.roleList = reload ? dataRows : this.roleList.concat(dataRows);
					} else {
						this.roleList = [];
					}
					// 判断数据是否加载完全
					if (response.total <= this.roleList.length) {
						this.loadStatus = 'noMore'
					}
					// 页数+1
					this.queryParams.pageNum++
				}).catch(() => {
					if (reload) {
						uni.hideLoading()
					}
				});
			},
			/** 成员管理 */
			handleManage(item) {
				uni.navigateTo({
					url: '/pages/mine/work/organizationalManagement/role/rolePerson?role=' + JSON.stringify(item)
				})
			},
			/** 删除按钮操作 */
			handleDelete(row, index) {
				var that = this
        this.$modal.loading();
				uni.showModal({
					title: '系统提示',
					confirmColor: '#00a660',
					content: '您确认要删除角色吗？角色删除后，将无法恢复？',
					success: function(res) {
						if (res.confirm) {
							uni.hideLoading()
							delCompanyRole(row.id)
							that.getList(true)
							that.$modal.msgSuccess("删除成功");
						} else if (res.cancel) {
							uni.hideLoading()
						}
					},
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	::v-deep .uni-card .uni-card__content{
		padding-bottom: 0 !important;
	}
	page {
		background: $uni-bg-color-grey;
	}
</style>
